// components/captcha.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },
    /**
     * 组件的初始数据
     */
    data: {
        verificationcode: "",
        text: "",
        errMess: '',
    },
    /**
     * 组件的方法列表
     */
    methods: {
        getverifyCode(e) {
            let code = e.detail.value;
            if (code == '') {
                this.setData({
                    errMess: '请输入验证码！'
                })
            }
            this.setData({
                verificationcode: code,
                errMess: ''
            })
            this.triggerEvent('getVerifyCode', { text: this.data.text, verificationcode: code }, {});
        },
        change() {
            this.getCode(this)
        },
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);

        },
        randomColor(min, max) {
            return `rgb(${this.randomNum(min, max)},${this.randomNum(min, max)},${this.randomNum(min, max)})`;
        },
        getCode(that) {
            const query = this.createSelectorQuery(this);
            query.select('#canvasRef').fields({ node: true, size: true }).exec((res) => {
                const canvas = res[0].node;//canvas对象
                const ctx = canvas.getContext('2d');//渲染上下文
                // Canvas 画布的实际绘制宽高
                const width = res[0].width
                const height = res[0].height

                // 初始化画布大小
                const dpr = wx.getWindowInfo().pixelRatio;
                canvas.width = width * dpr;
                canvas.height = height * dpr;
                ctx.scale(dpr, dpr);//改变画布的绘制单位
                ctx.fillStyle = this.randomColor(180, 240)//绘制形状填充的颜色
                ctx.fillRect(0, 0, 90, 28)//绘制 90*28 像素的已填充矩形,前面两个参数是坐标
                let text = '';
                let str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
                for (let i = 0; i < 4; i++) {
                    let txt = str[this.randomNum(0, str.length)];
                    ctx.fillStyle = this.randomColor(50, 160);//随机生成字体颜色
                    ctx.font = this.randomNum(20, 26) + `px SimHei`;//随机生成字体大小
                    let x = 5 + i * 20;//设置字的横坐标位置
                    let y = this.randomNum(20, 25);//设置字的纵坐标位置
                    let deg = this.randomNum(-20, 20)//设置字的旋转位置
                    ctx.translate(x, y);
                    ctx.rotate(deg * Math.PI / 180);
                    ctx.fillText(txt, 5, 0);//绘制文字
                    text = text + txt;
                    //恢复旋转位置和坐标
                    ctx.rotate(-deg * Math.PI / 180);
                    ctx.translate(-x, -y);
                }
                //绘制干扰线
                for (let i = 0; i < 4; i++) {
                    ctx.strokeStyle = this.randomColor(40, 180);//绘制形状边框的颜色
                    ctx.beginPath();
                    ctx.moveTo(this.randomNum(0, 90), this.randomNum(0, 28));//设置线条起点
                    ctx.lineTo(this.randomNum(0, 90), this.randomNum(0, 28));//设置线条终点点
                    ctx.stroke();//开始画
                }
                //绘制干扰点
                for (let i = 0; i < 20; i++) {
                    ctx.fillStyle = this.randomColor(0, 255);
                    ctx.beginPath();
                    ctx.arc(this.randomNum(0, 90), this.randomNum(0, 28), 1, 0, 2 * Math.PI);//arc() 方法创建弧/曲线参数分别为圆心横纵坐标，半径，起始角，终点角
                    ctx.fill();//绘制
                }
                that.setData({
                    text: text
                })
            })
        },
    },
    lifetimes: {
        attached() {
            this.getCode(this)
        }
    }
})
